<template>
  <Teleport to="body">
    <div class="side">
      <RouterLink
        activeClass="active"
        class="item"
        v-for="item in routes"
        :to="item.path"
        :key="item.name"
      >
        {{ item.name }}
      </RouterLink>
    </div>
  </Teleport>
</template>
<script setup>
import { routes } from '../router/index'
</script>
<style lang="scss" scoped>
.side {
  width: 200px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  box-shadow: inset -1px 0 0 var(--border-light-color);
  padding: 0 8px;
  transform: translateX(-100%);
  transition: all 0.25s;
  &:hover {
    transform: translateX(0);
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    height: 20px;
    width: 6px;
    border-radius: 0 4px 4px 0;
    transform: translateY(-50%);
    background-color: #000;
    opacity: 0.1;
  }
}
.item {
  display: block;
}
.active {
  color: var(--primary-color);
}
</style>
